<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <Variable01 />
    <Comments />
    <Importing />
    <Scope />
    <Nesting />
    <Mixin />
    <Operation />
    <Escaping />
    <Function />
    <Namespace />
    <Maps />

    <el-button type="text" @click="openPreview">点击预览</el-button>
    <ImagePreview :previewSrc="previewSrc" width="70%" title="预览2"></ImagePreview>

        <!-- element >v-2.11.0 -->
        <el-button @click="onPreview">预览</el-button>
        <el-image-viewer 
          v-if="showViewer" 
          :on-close="closeViewer" 
          :url-list="[url]" />
  </div>
</template>

<script>
// 导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import Variable01 from "./components/Variable01.vue";
import Comments from "./components/Comments.vue";
import Importing from "./components/Importing.vue";
import Scope from "./components/Scope.vue";
import Nesting from "./components/Nesting.vue";
import Mixin from "./components/Mixin.vue";
import Operation from "./components/Operation.vue";
import Escaping from "./components/Escaping.vue";
import Function from "./components/Function.vue";
import Namespace from "./components/Namespace.vue";
import Maps from "./components/Maps.vue";
import ImagePreview from "./components/common/imgPreview.vue";

export default {
  name: "App",
  components: {
    Variable01,
    Comments,
    Importing,
    Scope,
    Nesting,
    Mixin,
    Operation,
    Escaping,
    Function,
    Namespace,
    Maps,
    ImagePreview,
    ElImageViewer
  },
  data(){
    return{
      previewSrc:'',

      showViewer: false, // 显示查看器
      url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    }
  },

  methods: {
    openPreview(){
      this.previewSrc="";
      this.previewSrc='https://api.gcpdata.cn/api/open/uploadFile/download?fileName=homepage/banner/1.png'
      // this.$forceUpdate()
    },


    onPreview() {
      this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    }
    
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test {
  border: 1px solid red;
}
</style>
